<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    p{
      width: 100px;
      height: 100px;
      background-color: rgb(172, 172, 189);
      float: left;
      margin-left: 20px;
    }
    .box{
      overflow: hidden;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div class="box" id=" box">
    <p>p</p>
    <p>p</p>
    <p class="curr">p</p>
    <p>p</p>
    </div>
    <div class="box">
    <p>p</p>
    <p>p</p>
    <p class="curr">p</p>
    <p>p</p>
    </div>
    <div class=" box">
    <p>p</p>
    <p>p</p>
    <p class="curr">p</p>
    <p>p</p> 
    <div>
    <p>div+p</p>
    </div>
    </div>
  <script src="../jquery-1.12.4.min.js"></script>
  <script>
    $ps = $("p");
  //  给每行第二个变为红色
  // each遍历
  // jq对象的每一项都进行遍历
  $(".box").each(
    function () {
      // this关键字指向的是每次遍历的对象
      console.log(this);
      // 可以单独设置每一个
      $(this).children().eq(2).css("background-color","red")
    }
  )
  $ps.click(function () {
    // 获取元素在父级关系下的下标
    console.log($(this).index());
  })
  // 通过each
  $ps.each(function (i) {
    // 获取元素在父级关系下的下标
      $(this).click(function () {
        // this指向的是事件源
        // i当前循环中的元素，在大排序中的位置
        console.log($(this).index());
        console.log(i);
      
      })
  })

  </script>
</body>
</html>